<template>
  <div class="contanier">
    <div class="amap">
      <!-- 地图容器 -->
      <div ref="amap" class="amap_view"></div>

      <!-- 搜索栏 -->
      <div id="panel"></div>
    </div>
    <div class="loading" v-if="flag == 0">暂无攻略，请选择!</div>
    <div class="loading" v-else-if="flag == 1">
      <img alt="GIF Animation" src="@/assets/loading.gif" />
    </div>
    <div class="strategy" v-else>
      <div class="title">AI生成攻略如下：</div>
      <div v-html="strategy"></div>
    </div>
    <div class="left">
      <div class="header">根据你的需求填写你的旅游目标与喜好哦!</div>
      <div class="body">
        <el-form label-width="auto" :model="form" style="width: 280px">
          <el-form-item label="出发人数:">
            <el-input-number v-model="form.num" :min="1" :max="100" />
          </el-form-item>
          <el-form-item label="出发日期:">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="Pick a day"
              size="large"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="出发天数:">
            <el-input-number v-model="form.day" :min="1" :max="100" />
          </el-form-item>
          <el-form-item label="旅游城市:">
            <el-input v-model="form.city" autosize />
          </el-form-item>
          <el-form-item label="旅游经费:">
            <el-input-number v-model="form.money" :min="1" />
          </el-form-item>
          <el-form-item label="旅游人物:">
            <el-input v-model="form.people"  placeholder="同行人物，例如:我和父母"/>
          </el-form-item>
          <el-form-item label="旅游喜好:">
            <el-input v-model="form.like" type="textarea" autosize  placeholder="旅游偏好，例如：喜欢热闹的地方"/>
          </el-form-item>
        </el-form>
      </div>

      <el-button
        type="success"
        plain
        style="margin-left: 10px"
        @click="gofinish"
        >生成攻略</el-button
      >
      <el-button type="warning" plain @click="gofinish"
        >不喜欢？再生成一个！</el-button
      >
      <el-button type="primary" plain style="margin-top: 10px;"  @click="hotcommand">热门推荐</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  onMounted,
  onBeforeUnmount,
  ref,
  reactive,

} from 'vue'
import type {reswxai} from '@/api/wxai/type'
import AMapLoader from '@amap/amap-jsapi-loader'
import { getwxai } from '@/api/wxai/index'
const amap = ref(null)
const searchVal = ref('')

let map: any = null
let place: any  = null
let strategy = ref('')
onMounted(() => {
  loadAMap()
})
let flag = ref(0)

onBeforeUnmount(() => {
  (AMapLoader as any).reset()
  map && map.destroy()
  map = null
})

const loadAMap = () => {
  (AMapLoader as any).reset()

  AMapLoader.load({
    key: 'c7317e56d00520642ad9b6c86e9e6b48' /* Web端JS API key */,
    version: '2.0',
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation']
  })
    .then((AMap) => {
      initMap(AMap)
    })
    .catch((e) => {
      console.error(e)
    })
}

const initMap = (AMap:any) => {
  map = new AMap.Map(amap.value, {
    resizeEnable: true /* 城市定位 */,
    // zooms: [1, 18],
    zoom: 14
  })

  // 比例尺
  map.addControl(new AMap.Scale())
  // 工具条
  map.addControl(new AMap.ToolBar())

  // // 标记
  let maker = new AMap.Marker({
    title: '长安街1号',
    position: map.getCenter()
  })
  map.add(maker)
  AMap.plugin('AMap.Geolocation', function () {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      // timeout: 100, //超过10秒后停止定位，默认：无穷大
      maximumAge: 0, //定位结果缓存0毫秒，默认：0
      convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, //显示定位按钮，默认：true
      buttonPosition: 'RB', //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20),
      showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    })
    map.addControl(geolocation)
    geolocation.getCurrentPosition()
  })

  AMap.plugin(['AMap.PlaceSearch'], function () {
    //构造地点查询类
    var placeSearch = new AMap.PlaceSearch({
      type: '餐饮服务', // 兴趣点类别
      pageSize: 3, // 单页显示结果条数
      pageIndex: 1, // 页码
      map: map, // 展现结果的地图实例
      panel: 'panel', // 结果列表将在此容器中进行展示。
      autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    })
    place = placeSearch
    //关键字查询
  })
}
let form = reactive({
  num: 1,
  money: 1,
  people: '',
  like: '',
  day: 1,
  date: '',
  city: ''
})

import { ElMessage } from 'element-plus'

const  hotcommand=async()=>{
  let content = `你好，请你帮我写一篇旅游攻略,不低于400字`
    flag.value = 1
    let result:reswxai = await getwxai(content)
    if (result.status == 0) {
      console.log(result.data.result)

      strategy.value = result.data.result
        .replace(/\n/g, '<br>')
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      
      flag.value = 2
    }
}
const gofinish = async () => {
  if (form.date && form.people && form.like && form.city) {
    let content = `你好，请你帮我写一篇旅游攻略，旅游人数为${form.num}人，旅游经费为${form.money}元，旅游人数为${form.people},我的旅游喜好为${form.like},我的出发日期为${form.date},旅游城市为${form.city},请你帮我写一篇非常详细的旅游攻略,不低于400字`
    flag.value = 1
    let result:reswxai = await getwxai(content)
    if (result.status == 0) {
      console.log(result.data.result)

      strategy.value = result.data.result
        .replace(/\n/g, '<br>')
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      searchVal.value = form.city
      place.search(searchVal.value)
      flag.value = 2
    }
  } else {
    flag.value = 0
    ElMessage({
      message: '仍有其他信息还未填写，请补充后再完成哦！',
      type: 'warning'
    })
  }
}
</script>

<style scoped>
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25%;
  height: 45%;
  background-color: white;
  margin-top: 20px;
  overflow: auto;
}
.strategy {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25%;
  height: 45%;
  background-color: white;
  padding: 10px;
  overflow: auto; /* 通过滚动条显示溢出内容 */
  .title {
    font-size: 20px;
    font-weight: 800;
    margin: 8px;
  }
}
.strategy >>> strong {
  font-weight: 700;
}
.amap {
  width: 100%;
  height: 100vh;
  border: 1px solid #ccc;
  position: relative;

  .amap_view {
    width: 100%;
    height: 100%;
  }
  .el-input {
    width: 256px;
    position: absolute;
    top: 10px;
    right: 400px;
  }
}
.contanier {
  position: relative;
  width: 100%;
  height: 100vh;
}
.left {
  position: absolute;
  top: 0;
  left: 0px;
  margin: 20px;
  width: 300px;
  height: 600px;
  background-color: white;

  .header {
    font-size: 20px;
    font-weight: 800;
    margin-top: 10px;
    margin-left: 10px;
  }
  .body {
    margin-top: 20px;
    margin-left: 10px;
  }
  .btn {
    margin-left: 10px;
  }
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 50%;
  right: 10px;
  width: 25%;
}
</style>
